<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <!-- <h1>{{ $t('change') }}</h1> -->
      <el-button @click="changeZH">中文</el-button>
      <el-button @click="changeEN">English</el-button>
    </div>
    <div>
      <!-- <el-button
        v-for="(item, index) in $t('nav')"
        :key="item[`nav${index + 1}`]"
      >{{ $t(item) }}</el-button> -->
    </div>
    <div class="editor-box">
      <quill-editor
        :content="content"
        :options="editorOption"
        @change="onEditorChange($event)"
      />
    </div>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: 'a',
      editorOption: {
        theme: 'snow', // Specify theme in configuration
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            [{ indent: '-1' }, { indent: '+1' }],
            [{ direction: 'rtl' }],
            [{ size: ['small', false, 'large', 'huge'] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }],
            [{ font: [] }],
            [{ align: [] }],
            [{ clean: [] }],
            ['link', 'image', 'video']
          ]
        }
      }
    }
  },
  methods: {
    changeZH() {
      this.$i18n.locale = 'zh'
    },
    changeEN() {
      this.$i18n.locale = 'en'
    },
    onEditorChange(e) {
      console.log(e)
      this.content = e.html
    }
  }
}
</script>
<style lang="less">
.editor-box {
  height: 400px;
  border: 1px solid red;
}

.quill-editor {
  height: 350px;
}
</style>
